<template>
  <div class="cateAll">
    <common-header title="分类"></common-header>
    <div class="cateBody headerWrap">
      <div class="cateLeft">
        <ul>
          <li :class="{ active: num === index}" v-for="(cate, index) in cates" :key="cate.id" @click="toOwnCate(index)">{{cate.name}}</li>
        </ul>
      </div>
      <div class="cateRight" v-if="cateList.length">
        <van-card v-for="item in cateList"
          :key="item.id"
          :price="item.minPrice"
          :title="item.name"
          :thumb="item.pic"
          @click="toDetail(item)"
          :lazy-load="true"
        />
      </div>
      <div class="nocateRight" v-if="!cateList.length">
        <van-empty description="暂无商品，敬请期待新品上线" />
      </div>
    </div>
    <common-tabbar></common-tabbar>
  </div>
</template>

<script>
import CommonTabbar from '@components/CommonTabbar'
import CommonHeader from '@components/CommonHeader'
import { getGrid, getList } from '@api'
export default {
  data () {
    return {
      cates: [], // 商品分类
      num: 0,
      cateList: [] // 具体分类下的商品
    }
  },
  created () {
    this.fetchCate()
  },
  methods: {
    // 获取类别
    fetchCate () {
      getGrid().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.fetchList()
        }
      })
    },
    toOwnCate (index) {
      this.num = index
      this.fetchCate()
    },
    // 获取类别下的商品类别
    fetchList () {
      getList({
        categoryId: this.cates[this.num].id
      }).then(res => {
        this.cateList = []
        if (res.data.code === 0) {
          this.cateList = res.data.data
        }
      })
    },
    toDetail (item) {
      this.$router.push(`/detail/${item.id}`)
    }
  },
  components: {
    CommonTabbar,
    CommonHeader
  }
}
</script>

<style lang="scss" scoped>
.cateAll {
  display: flex;
  flex-direction: column;
  .cateBody {
  flex: 1;
  display: flex;
  .cateLeft {
    box-sizing: border-box;
    flex: 1.5;
    background-color: rgb(248, 248, 248);
    li {
      padding:5px 0;
      padding-left: 10px;
      line-height: 40px;
      font-size: 14PX;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: #000;
      &.active {
        background-color: #fff;
      }
    }
  }
  .cateRight {
    flex: 5;
    .van-card {
      background-color: #fff;
    }
  }
  .nocateRight {
     flex: 5;
     text-align: center;
     p {
      color: #000;
      font-size: 16PX;
      margin-top: 20px;
     }
  }
}
}

</style>
